<template>
  <div>
    <el-card shadow="naver" v-for="(item, index) in conditions" :key="index">
      <el-button
        @click="delcondition(conditions, index)"
        type="text"
        size="small"
        icon="el-icon-remove"
        >移除</el-button
      >
      <br />
      <el-select
        size="mini"
        style="width: 100%"
        v-model="item.conditionId"
        placeholder="选择条件类型"
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="item in conditionSelectors"
          :key="item.id"
        >
        </el-option>
      </el-select>
      <p class="text-description">{{getConditionDescription(item.conditionId)}}</p>

      <el-input
        size="mini"
        v-model="item.parameter"
        placeholder="参数"
      ></el-input>
      <el-input
        size="mini"
        v-model="item.description"
        placeholder="描述"
      ></el-input>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    conditions: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      conditionSelectors: [],
    };
  },
  mounted() {
    this.loadConditionSelectors();
  },
  methods: {
    loadConditionSelectors() {
      this.$store.dispatch("workflow/getAllconditions").then((res) => {
        console.log(res);
        this.conditionSelectors = res;
      });
    },
    delcondition(conditions, index) {
      conditions.splice(index, 1);
    },
    getConditionDescription(id)
    {
      var conditions =this.conditionSelectors.filter(c=>c.id==id);
      return conditions.length==0?"":conditions[0].description;
    }
  },
};
</script>

<style>

</style>
